import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { generatePath } from 'react-router-dom';
import { useMutation } from '@apollo/client';

import { CloseIcon } from 'components/icons';
import { A } from './Text';
import { Spacing } from './Layout';
import Avatar from 'components/Avatar';

import { GET_AUTH_USER, GET_USER } from 'graphql/user';
import { DELETE_COMMENT } from 'graphql/comment';
import { GET_POST, GET_POSTS, GET_FOLLOWED_POSTS } from 'graphql/post';

import { useNotifications } from '../hooks/useNotifications';

import { useStore } from 'store';

import * as Routes from 'routes';

const DeleteButton = styled.button`
  cursor: pointer;
  display: none;
  background-color: transparent;
  border: 0;
  outline: 0;
  position: absolute;
  right: 7px;
  top: 6px;
`;

const Root = styled.div`
  display: flex;
  flex-direction: row;
  padding: ${(p) => p.theme.spacing.xxs} 0;
  font-size: ${(p) => p.theme.font.size.xxs};

  &:hover ${DeleteButton} {
    display: block;
  }
`;

const UserName = styled.div`
  color: ${(p) => p.theme.colors.primary.main};
  font-weight: ${(p) => p.theme.font.weight.bold};
`;

const CommentSection = styled.div`
  position: relative;
  word-wrap: break-word;
  overflow: hidden;
  padding: 0 ${(p) => p.theme.spacing.lg} ${(p) => p.theme.spacing.xxs} ${(p) => p.theme.spacing.xs};
  background-color: ${(p) => p.theme.colors.grey[100]};
  border-radius: ${(p) => p.theme.radius.lg};
  margin-left: ${(p) => p.theme.spacing.xxs};
  color: ${(p) => p.theme.colors.text.main};
`;

/**
 * Renders comments UI
 */
const Comment = ({ comment, postId, postAuthor }) => {
  const [{ auth }] = useStore();
  const notification = useNotifications();
  const [deleteComment] = useMutation(DELETE_COMMENT, {
    refetchQueries: [
      { query: GET_FOLLOWED_POSTS, variables: { userId: auth.user.id } },
      { query: GET_USER, variables: { username: comment.author.username } },
      { query: GET_AUTH_USER },
      { query: GET_POSTS, variables: { authUserId: auth.user.id } },
      { query: GET_POST, variables: { id: postId } },
    ],
  });

  const handleDeleteComment = async () => {
    await deleteComment({ variables: { input: { id: comment.id } } });

    // Delete notification after comment deletion
    if (auth.user.id !== postAuthor.id) {
      const isNotified = postAuthor.notifications.find((n) => n.comment && n.comment.id === comment.id);
      notification.remove({
        notificationId: isNotified.id,
      });
    }
  };

  return (
    <Root>
      <A
        to={generatePath(Routes.USER_PROFILE, {
          username: comment.author.username,
        })}
      >
        <Avatar image={comment.author.image} />
      </A>

      <CommentSection>
        {comment.author.id === auth.user.id && (
          <DeleteButton onClick={handleDeleteComment}>
            <CloseIcon width="10" />
          </DeleteButton>
        )}

        <Spacing top="xxs" />

        <Spacing inline right="xxs">
          <A
            to={generatePath(Routes.USER_PROFILE, {
              username: comment.author.username,
            })}
          >
            <UserName>{comment.author.fullName}</UserName>
          </A>
        </Spacing>

        {comment.comment}
      </CommentSection>
    </Root>
  );
};

Comment.propTypes = {
  comment: PropTypes.object.isRequired,
  postId: PropTypes.string.isRequired,
  postAuthor: PropTypes.object.isRequired,
};

export default Comment;
